<script setup>
const props = defineProps({
  kind: {
    type: String,
    required: true,
    default: 'info'
  },
  title: {
    type: String,
    required: true,
    default: '失败'
  },
  txt: {
    type: String,
    required: true,
    default: '这是一条没有内容的提示'
  }
})

let logo
if(props.kind === 'success') {
  logo = 'checkmark_circle_fill'
} else if(props.kind === 'error') {
  logo = 'multiply_circle_fill'
} else if(props.kind === 'warn') {
  logo = 'exclamationmark_circle_fill'
} else {
  logo = 'info_circle_fill'
}
</script>

<template>
  <transition name="bounce-rt" appear>
    <div class="note-a">
      <div :class="['note-b', kind]"><i :class="['iconfont', 'fs20', logo]"></i> <span class="note-c">{{title}}</span></div>
      <div class="note-d">{{txt}}</div>
    </div>
  </transition>
</template>

<style scoped>
.success {color: #67C23A;}
.info {color: #409EFF;}
.warn {color: #E6A23C;}
.error {color: #F56C6C;}
.note-a {width: 250px; position: fixed; z-index: 10; top: 10px; right: 10px; padding: 15px; background-color: #FFF; box-shadow: 2px 2px 3px #888; border-radius: 4px;}
.note-b {line-height:40px; font-size: 20px;}
.note-c {font-weight: bold;}
.note-d {padding: 15px; line-height: 20px; color: #333;}
</style>
